<template>
  <div style=" width: 96%; margin: auto;">
    <el-row style="margin-top: 20px;">
      <el-col :span="20">
        <h3>{{ year }}年度登记、备案事项变更情况 （本年度系指{{ year }}年1月1日至12月31日期间）</h3>
      </el-col>
    </el-row>
    <el-form :model="yearlyRegisterAddRequestList" ref="yearlyRegisterAddRequestListRef">
      <el-row>
        <el-col :span="24" style="margin-top: 20px;">
          <el-table :header-cell-style="{ background: '#F0F5FA', color: '#333333' }" size="default"
            :data="yearlyRegisterAddRequestList" border>
            <el-table-column type="index" label="序号" align="center" width="60" />
            <el-table-column prop="filingMatter" label="变更事项" align="center">
              <template #default="scope">
                <!--                <el-form-item :prop="'[' + scope.$index + '].filingMatter'" :rules="listRules.filingMatter">-->
                <el-input disabled v-model="scope.row.filingMatter" placeholder="请输入"></el-input>
                <!--                </el-form-item>-->
              </template>
            </el-table-column>
            <el-table-column prop="filingType" label="是否变更" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].filingType'" :rules="listRules.filingType">
                  <el-select clearable v-model="scope.row.filingType" placeholder="请选择" style="width: 100%;">
                    <el-option v-for="dict in shiOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="handleSituation" label="办理情况" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].handleSituation'" :rules="listRules.handleSituation">
                  <el-select clearable v-model="scope.row.handleSituation" placeholder="请选择" style="width: 100%;">
                    <el-option v-for="dict in handleOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="capproveTime" label="批准时间" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].capproveTime'" :rules="listRules.capproveTime">
                  <el-date-picker value-format="YYYY-MM-DD" v-model="scope.row.capproveTime" type="date"
                    style="width: 100%;" placeholder="批准时间">
                  </el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { getDictByCode, getTableInfoByPage, stSaveYearly } from '@/views/yearCheck/ykb/st/st'

export default {
  data() {
    return {
      year: undefined,
      sexOptions: [{ id: '1', name: '男' }, { id: '2', name: '女' }],
      shiOptions: [{ id: '1', name: '是' }, { id: '2', name: '否' }],
      handleOptions: undefined,
      accountingOptions: undefined,
      billTypeOptions: undefined,
      yearlyRegisterAddRequestList: [],
      listRules: {
        // filingMatter: [{ required: true, message: '请完善', trigger: 'blur' }],
        // filingType: [{ required: true, message: '请选择', trigger: 'blur' }],
        // handleSituation: [{ required: true, message: '请选择办', trigger: 'blur' }],
        // capproveTime: [{ required: true, message: '请选择', trigger: 'blur' }]
      }
    }
  },
  created() {

  },
  methods: {
    postInfo() {
      this.$refs.yearlyRegisterAddRequestListRef.validate(valid => {
        if (valid) {
          if (this.yearlyRegisterAddRequestList == null || this.yearlyRegisterAddRequestList.length == 0) {
            return;
          }
          for (let i = 0; i < this.yearlyRegisterAddRequestList.length; i++) {
            this.yearlyRegisterAddRequestList[i].creditCode = localStorage.getItem('creditCode')
            this.yearlyRegisterAddRequestList[i].examineYear = localStorage.getItem('examineYear')
          }
          stSaveYearly(this.yearlyRegisterAddRequestList).then(response => {
            this.$message({
              message: '本年度登记、备案事项变更情况保存成功',
              type: 'success'
            })
            this.getInfo();
          })
        } else {
          this.$message({
            message: '请填写完整',
            type: 'error'
          })
        }
      });

    },
    getInfo() {
      this.year = localStorage.getItem("examineYear");
      getTableInfoByPage(3).then(response => {
        this.yearlyRegisterAddRequestList = JSON.parse(JSON.stringify(response.data.yearlyRegisterAddRequestList).replace(/null/g, '""'));
        if (this.yearlyRegisterAddRequestList == null || this.yearlyRegisterAddRequestList == '') {
          this.yearlyRegisterAddRequestList = []
        }
        for (let i = 0; i < this.yearlyRegisterAddRequestList.length; i++) {
          this.yearlyRegisterAddRequestList[i].filingType += ''
        }
        for (let i = 0; i < this.yearlyRegisterAddRequestList.length; i++) {
          if (this.yearlyRegisterAddRequestList[i].filingType == null || this.yearlyRegisterAddRequestList[i].filingType == 0) {
            this.yearlyRegisterAddRequestList[i].filingType = '2';
            this.yearlyRegisterAddRequestList[i].handleSituation = '355';
          }
        }
      })
      getDictByCode('handle').then(response => {
        this.handleOptions = response.data
      })
      getDictByCode('accounting').then(response => {
        this.accountingOptions = response.data
      })
      getDictByCode('billType').then(response => {
        this.billTypeOptions = response.data
      })
    },
    addList() {
      this.yearlyRegisterAddRequestList.push({
        filingMatter: '',
        filingType: '',
        handleSituation: '',
        capproveTime: ''
      })
    }
  }
}
</script>
<style scoped lang="scss">
.el-table {
  --el-table-row-hover-bg-color: rgba(39, 137, 238, 0.1);
  --el-table-border-color: #e0e5f0;
}

:deep(.el-card.is-always-shadow) {
  box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6)
}

/* 拉框选中 */
.el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

/* 鼠标经过下拉框 */
.el-select-dropdown__item:hover {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

.el-select-dropdown__item.selected {
  color: #2789EE;
}

.app-container {
  margin-top: 40px;
  margin-left: 15%;
  width: 70%;
}

.div-bg {
  width: 100%;
  background: #F0F0F0;
  height: 10px;
}

.box-card {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
}

.el-col {
  padding-left: 5px;
}

.divider-title {
  font-weight: bold;
  font-size: 18px;
}

.custom-select .el-select-dropdown {
  max-height: 600px;
  /* 设置为你想要的高度 */
  overflow: auto;
  /* 添加滚动条 */
}

table {
  border-collapse: collapse;
  /* 确保表格的边框合并为单一边框 */
  width: 100%;
  /* 表格宽度 */
}

td {
  border: 1px solid #ababab;
  /* 设置单线边框 */
  padding: 6px;
  /* 单元格内边距 */
}

.el-form-item {
  margin-bottom: 0px;
}
</style>
